<div class="country-show">
  <div class="country-header">
    <div class="inner">

      <!--  colored header -->
      <div class="country-header-inner">
        <div class="country-title">
          <h1><%= @country['name'] %></h1>
          <div class="country-selector">
            <select id="areaSelector">
              <option>Select jurisdiction</option>
            </select>
            <div class="selector-remove">✕</div>
            <div class="selector-arrow"></div>
          </div>
        </div>

        <div class="country-details">
          <div class="country-preview">
            <div class="mobile-scroll"></div>
            <div class="map" id="countryMap"></div>
            <div class="tree-numbers">
              <div class="tree-cover">
                <h4>Tree cover (2000)</h4>
                  <span class="amount"><!--<%= extent_to_human(@country['extent'], format: '%n') %>--></span>
                  <span class="unit"><%= extent_to_human(@country['extent'], format: '%u', shortUnit: true) %></span>
              </div>
              <div class="total-area">
                <h4>Percent Tree Cover (2000)</h4>
                <span class="amount"></span>
                <span class="unit">%</span>
              </div>
            </div>
            <div class="loss-gain-graph ghost">
              <h4>TREE COVER LOSS (2001 - 2013)</h4>
              <div class='graph' id="lossGainGraph"></div>
              <div class='graph-amount'></div>
              <div class='graph-date'></div>
              <div class='coming-soon'><span>Not yet available for this country</span></div>
            </div>
          </div>
        </div>
      </div>

    </div>
  </div>
</div>
